<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表排序_computed实现</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" placeholder="请输入名字" v-model="keyword">
    <button @click="sortType=0">原序排列</button>
    <button @click="sortType=1">年龄升序↑</button>
    <button @click="sortType=2">年龄降序↓</button>
    <ul>
        <li v-for="(item,index) in fmtPersons" :key="item.id">
            {{ item.name }}---{{item.age}}---{{item.sex}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    new Vue({
        el: "#root",
        data() {
            return {
                keyword: "",
                sortType: 0,//0原顺序,1升序,2 降序@click="changeSortType"
                persons: [ //原始人员列表
                    {id: '001', name: '马冬梅', age: 19, sex: '女'},
                    {id: '002', name: '周冬雨', age: 18, sex: '女'},
                    {id: '003', name: '周杰伦', age: 21, sex: '男'},
                    {id: '004', name: '温兆伦', age: 20, sex: '男'}
                ],
                fmtPersons: []
            }
        },
        watch: {
            fmtPersons:{
                immediate:true,
                handler(newValue,oldValue){
                    const arr=this.persons.filter(
                        (p)=>{
                            return p.name.indexOf(this.keyword)!==-1
                        }
                    )
                    return arr
                }
            }
        }
    })
</script>
</body>
</html>